<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns="http://www.w3.org/1999/xhtml"
                template="./tpl/panel.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns:ezcomp="http://xmlns.jcp.org/jsf/composite/ezcomp">

    <ui:define name="title">
        Домашняя
    </ui:define>
    
    <ui:define name="panel">
          <div class="row">              
            <div class="col-md-4"><h1>Баланс: </h1></div>
            <div class="col-md-4"><h1>#{panelView.amount} Руб</h1></div>
        </div>
        
        <div class="row">
            <div class="col-md-4"><h3>График </h3></div>
            <div class="col-md-8"><h3>Список операций</h3></div>
        </div>
        <div class="row">
            <div class="col-md-4" id="graph" style="width: 330px; height: 200px;"></div>            
            <div class="col-md-8">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>№</th>
                            <th>Название</th>
                            <th>Сумма</th>
                            <th>Дата изменения</th>
                        </tr>
                    </thead>
                    <tbody>                                          
                        <c:forEach items="#{panelView.transactions}" var="item"> 
                            <ezcomp:transaction view="table" value="#{item}"></ezcomp:transaction>
                          </c:forEach>
                        <c:if test="#{panelView.transactions.size()==0}">
                            <tr class="warning">
                                <td colspan="4">
                                    <h3>
                                        Список операций пуст.
                                    </h3>
                                </td>
                            </tr>
                        </c:if>
                        <tr class="info">
                                <td colspan="4">
                                    <a class="btn btn-default" href="addTransaction.xhtml" role="button">Добавить операцию</a>
                                    <a class="btn btn-default" href="#" role="button">Список всех операций</a>
                                </td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12"><h3>Список счетов </h3></div>            
        </div>
        <div class="row">
                        
            <div class="col-md-12">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>№</th>
                            <th>Название</th> 
                            <th>...</th> 
                        </tr>
                    </thead>
                    <tbody>        
                        
                        <c:forEach items="#{panelView.accounts}" var="item">
                            <a href="account.xhtml">
                                <ezcomp:account view="table" value="#{item}"></ezcomp:account>  
                            </a>
                        </c:forEach>
                        <c:if test="#{panelView.accounts.size()==0}">
                            <tr class="warning">
                                <td colspan="3">
                                    <h3>
                                        Список счетов пуст.
                                    </h3>
                                </td>
                            </tr>
                        </c:if>
                        <tr class="info">
                                <td colspan="3">
                                    <a class="btn btn-default" href="addAccount.xhtml" role="button">Добавить счет</a>
                                    <a class="btn btn-default" href="#" role="button">Список всех счетов</a>
                                </td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script type="text/javascript">
            //<![CDATA[
            (function () {
              var
                container = document.getElementById('graph'),
                start = (new Date).getTime(),
                data, graph, offset, i;

              // Draw a sine curve at time t
              function animate (t) {

                data = [];
                offset = 2 * Math.PI * (t - start) / 10000;

                // Sample the sine function
                for (i = 0; i < 4 * Math.PI; i += 0.2) {
                  data.push([i, Math.sin(i - offset)]);
                }

                // Draw Graph
                graph = Flotr.draw(container, [ data ], {
                  yaxis : {
                    max : 2,
                    min : -2
                  }
                });

                // Animate
                setTimeout(function () {
                  animate((new Date).getTime());
                }, 50);
              }

              animate(start);
            })();
            //]]>
        </script>
    </ui:define>

</ui:composition>
